// 公共样式
* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(to right, #01e7ed, #ebfabb);
}

.box {
  display: flex;
}

//--------- 右侧部分-----------
// 输入
.left {
  flex       : 3;
  margin-top : 2rem;
  margin-left: 1rem;
  font-size  : 1rem;

  input {
    width        : 11rem;
    height       : 1.6rem;
    font-size    : 0.75rem;
    outline      : none;
    text-indent  : 0.167rem;
    margin-right : 0.625rem;
    margin-left  : 0.208rem;
    border-radius: 0.417rem;
    border       : 1px solid transparent;
  }

  button {
    margin-left     : -0.625rem;
    width           : 3rem;
    height          : 1.6rem;
    border-radius   : 0.417rem;
    font-size       : 0.75rem;
    background-color: #888888;
    border          : 1px solid transparent;
    color           : #fff;
  }
}

// 表格区域
.tables {

  margin-top: 1.25rem;

  table {
    border        : 2px solid #ffffff;
    width         : 44rem;
    height        : 2rem;
    border-spacing: 0;
    border-radius : 0.6rem;
    text-align    : center;
    overflow      : hidden;

    tr {
      &:first-child {
        background-image: linear-gradient(to right, #3485a1, skyblue);
      }
    }

    th {
      border-right: 2px solid #ffffff;
      height      : 2rem;

      &:nth-child(3) {
        border-right: none;
      }
    }

    td {
      border-right: 2px solid #ffffff;
      border-top  : 2px solid #ffffff;
      height      : 2rem;

      &:last-child {
        border-right: 0px;
      }
    }
  }
}



// 右边部分
.right {
  flex        : 2;
  margin-top  : 2rem;
  margin-right: 2.083rem;

  h3 {
    display      : none;
    margin-bottom: 0.417rem;
  }

  .score {
    height             : 15rem;
    // background-color: red;
    margin-bottom      : 1.5rem;
  }

  .pay {
    height             : 15rem;
    // background-color: orange;
  }
}